## **BEM**
**Created by**: Yandex
**Purpose**: BEM provides a structured naming convention to make CSS **scalable**, **predictable**, and **maintainable**.
1. **Block (`.block`)** – A reusable, standalone component (e.g., `button`, `card`, `nav`).
```css
.button {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
```
2. **Element (`.block__element`)** – A part of the block that has no meaning without the block (e.g., `button__icon`, `card__title`).
```css
.button__icon {
margin-right: 5px;
}
```
3. **Modifier (`.block--modifier` or `.block__element--modifier`)** – A variation of the block or element (e.g., `button--primary`, `button--large`).
```css
.button--primary {
background-color: blue;
color: white;
}
```
---
### **Example: BEM in Action**
```html
```
```css
/* Block */
.button {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
}
/* Element */
.button__icon {
margin-right: 5px;
}
/* Modifier */
.button--primary {
background-color: blue;
color: white;
}
```
- `.button` → Block (base styles)
- `.button__icon` → Element (sub-component)
- `.button--primary` → Modifier (variation)
## **SMACSS (Scalable and Modular Architecture for CSS)**
**Created by**: Jonathan Snook
**Purpose**: SMACSS is a set of guidelines that help categorize and structure CSS in a modular way to improve maintainability and scalability.
### **Key Principles**
SMACSS organizes CSS into five main categories:
1. **Base Rules** – Default styles for elements (e.g., ``, ``, `